<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ElementPlus简单后端布局</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <style>
      :root {
        --system-primary-color: #409eff;
        --system-primary-text-color: #fff;

        /* 菜单颜色相关 */
        --system-menu-text-color: #bfcbd9;
        --system-menu-background: #181f31;
        --system-menu-children-background: #1f2d3d;
        --system-menu-submenu-active-color: #fff;
        --system-menu-hover-background: #203448;
      }
      * {
        margin: 0;
        padding: 0;
      }
      [v-cloak] {
        display: none;
      }
      html,
      body,
      #app {
        height: 100vh;
      }
      .container {
        height: 100%;
      }
      .el-header {
        background-color: #b3c0d1;
        color: var(--el-text-color-primary);
        line-height: 60px;
      }
      .el-aside {
        background-color: var(--system-menu-background);
      }
      .el-menu {
        border-right: none;
      }
      .el-menu-item,
      .el-sub-menu {
        background-color: var(--system-menu-background) !important;
      }
      .el-menu-item:hover,
      .el-sub-menu__title:hover {
        background-color: var(--system-menu-hover-background) !important;
      }
      .el-sub-menu.is-active > .el-sub-menu__title,
      .el-sub-menu.is-active > .el-sub-menu__title i {
        color: var(--system-menu-submenu-active-color) !important;
      }
      .el-sub-menu .el-sub-menu .el-sub-menu__title {
        background-color: var(--system-menu-children-background) !important;
      }
      .el-sub-menu .el-sub-menu .el-sub-menu__title:hover {
        background-color: var(--system-menu-hover-background) !important;
      }

      /* 菜单项样式 */
      .el-menu-item {
        background-color: var(--system-menu-children-background) !important;
      }
      .el-menu-item:hover {
        background-color: var(--system-menu-hover-background) !important;
      }
      .el-menu-item.is-active {
        background-color: var(--system-primary-color) !important;
        color: var(--system-primary-text-color) !important;
      }
      .el-menu-item.is-active:hover {
        background-color: var(--system-primary-color) !important;
        color: var(--system-primary-text-color) !important;
      }

      .layout-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .collapse-icon {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <el-container class="container">
        <el-aside :width="isCollapse ? '60px' : '200px'">
          <el-scrollbar>
            <el-menu
              background-color="var(--system-menu-background)"
              text-color="var(--system-menu-text-color)"
              active-text-color="var(--system-primary-color)"
              :collapse-transition="false"
              :collapse="isCollapse"
            >
              <menu-item v-for="menu in menus" :key="menu.text" :menu="menu"></menu-item>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-header class="layout-header">
            <div class="collapse-icon" @click="menuCollapseToggle">
              <i class="el-icon-s-unfold" v-if="isCollapse"></i>
              <i class="el-icon-s-fold" v-else></i>
            </div>
            <el-dropdown>
              <span class="el-dropdown-link"> <i class="el-icon-setting" style="margin-right: 10px"></i>王小虎 </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>新增</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-header>

          <el-main>
            <el-table :data="tableData">
              <el-table-column prop="date" label="日期" width="140"> </el-table-column>
              <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <!-- <script src="js/vue.min.js"></script> -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <script>
      const useMenuEffect = () => {
        const { ref } = Vue
        let menus = [
          { id: '1', text: '首页', iconClass: 'el-icon-document' },
          {
            id: '2',
            text: '人员管理',
            iconClass: 'el-icon-user',
            children: [
              { id: '2-1', text: '教师管理', children: [{ id: '2-1-1', text: '数学系' }] },
              { id: '2-2', text: '助教管理' }
            ]
          },
          {
            id: '3',
            text: '权限管理',
            iconClass: 'el-icon-setting',
            children: [
              { id: '3-1', text: '角色管理' },
              { id: '3-2', text: '人员角色' }
            ]
          },
          {
            id: '4',
            text: '组件',
            iconClass: 'el-icon-s-grid',
            children: [
              { id: '4-1', text: '按钮' },
              { id: '4-2', text: '文本编辑器' },
              { id: '4-3', text: 'md编辑器' },
              { id: '4-4', text: '地图组件' },
              { id: '4-5', text: '图像裁剪' }
            ]
          },
          {
            id: '5',
            text: '组件',
            iconClass: 'el-icon-s-grid',
            children: [
              { id: '5-1', text: '按钮' },
              { id: '5-2', text: '文本编辑器' },
              { id: '5-3', text: 'md编辑器' },
              { id: '5-4', text: '地图组件' },
              { id: '5-5', text: '图像裁剪' }
            ]
          }
        ]
        return {
          menus: ref(menus)
        }
      }
      const useTableEffect = () => {
        const { reactive } = Vue
        const item = {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }

        const tData = reactive({
          tableData: Array(20).fill(item)
        })
        return {
          tData
        }
      }

      const useMenuToggleEffect = () => {
        const { ref } = Vue
        const isCollapse = ref(false)
        const menuCollapseToggle = () => {
          isCollapse.value = !isCollapse.value
        }
        return {
          isCollapse,
          menuCollapseToggle
        }
      }

      const app = Vue.createApp({
        setup() {
          const { toRefs } = Vue
          const { menus } = useMenuEffect() // 菜单数据
          const { tData } = useTableEffect() // 表格数据
          const { isCollapse, menuCollapseToggle } = useMenuToggleEffect()
          return {
            menus,
            isCollapse,
            menuCollapseToggle,
            ...toRefs(tData)
          }
        }
      })
      app.use(ElementPlus)
      app.component('menu-item', {
        // 菜单项组件
        name: 'menuItem',
        template: `
          <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.id">
            <template #title>
              <i v-if="menu.iconClass" :class="menu.iconClass"></i>
              <span>{{menu.text}}</span>
            </template>
            <menu-item v-for="item in menu.children" :key="item.text" :menu="item"></menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="menu.id">
            <i v-if="menu.iconClass" :class="menu.iconClass"></i>
            <template #title>              
              <span>{{menu.text}}</span>
            </template>
          </el-menu-item>
        `,
        props: {
          menu: {
            type: Object,
            default: () => ({})
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
